let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //是一个类，使用需要使用new
let MiniCssExtractPlugin = require('mini-css-extract-plugin'); //将CSS 分离出来
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS
const { pathToFileURL } = require('url');
module.exports = {
  devtool: 'source-map', //增加映射文件，可以帮我们调试源代码
  devServer: {
    //开发服务器的配置
    port: 3000,
    progress: true, //内存打包进度条
    contentBase: './dist', //静态服务的目录
  },
  mode: 'development',
  // mode: 'production',
  //多入口
  entry: {
    home: './src/index.js',
    other: './src/other.js',
  },
  output: {
    filename: '[name].js', //打包后的文件名
    path: path.resolve(__dirname, 'dist'), //路径必须是一个绝对路径
  },
  plugins: [
    //是个数组 里面存放所有的webpack插件
    new HtmlWebpackPlugin({
      template: './src/index.html', //指定打包的模板
      filename: 'index.html', //指定打包后文件的名字
      chunks: ['home'],
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html', //指定打包的模板
      filename: 'other.html', //指定打包后文件的名字
      chunks: ['other'],
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css',
    }),
    new OptimizeCssAssetsPlugin({
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: false,
    }),
  ],
  module: {
    rules: [
      // {
      //   test: /\.js$/,
      //   use: {
      //     loader: 'eslint-loader',
      //     options: {
      //       enforce: 'pre', //强制这个loader 最先执行
      //     },
      //   },
      // },
      {
        test: /.html/,
        use: 'html-withimg-loader',
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: ['file-loader'],
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            //用babel-loader 将es6 -es5
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'], //处理ES7语法的插件
          },
        },
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
      },
    ], //规则
  },
};
